/**
 * 工位管理-关联员工
 */
import React, { useState } from 'react';
import { Modal, Form, Spin, message } from 'antd';
import { OrgEmployeeTree } from '@/containers';
import styles from '../index.less';
import { handleRelativeEmployee, getEmployeeStationStatus } from '../../service';

const FORM_DEFAULT_LAYOUT = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 15
    }
};

const MoreOperateModal = ({
    form,
    onOk,
    visible = false,
    info,
    ...rest
}) => {
    const { getFieldDecorator, validateFields, resetFields } = form;
    const [submitLoading, setSubmitLoading] = useState(false);
    const [checkLoading, setCheckLoading] = useState(false);
    const [validateName, setValidateName] = useState(undefined);
    const [validateStatus, setValidateStatus] = useState(undefined);
    const employeeLoading = false;
    const handleOk = () => {
        validateFields(async (err, values) => {
            if (err) {
                return;
            }
            try {
                setSubmitLoading(true);
                const { code, msg } = await handleRelativeEmployee({
                    id: info.id,
                    addressCode: info.addressCode,
                    cubicleLinkEmployee: {
                        employeeCode: values.employeeCode
                    }
                });
                if (code === 10000) {
                    message.success('关联员工成功！');
                } else {
                    message.error(msg);
                }
                onOk();
                setSubmitLoading(false);
            } catch (e) {
                setSubmitLoading(false);
            }
        });
    };
    return (
        <Modal
            {...rest}
            visible={visible}
            width={526}
            onOk={handleOk}
            confirmLoading={submitLoading}
            destroyOnClose
            afterClose={() => {
                resetFields();
            }}
            className={styles.modalWrap}
        >
            <Spin spinning={employeeLoading || submitLoading}>
                <Form {...FORM_DEFAULT_LAYOUT} className={styles.modalFormWrap}>
                    <>
                        <Form.Item label="办公地点" style={{ marginBottom: 8 }}>
                            <div>{info.addressName}</div>
                        </Form.Item>
                        <Form.Item label="工位编号" style={{ marginBottom: 8 }}>
                            <div>{info.cubicleAreaCode}</div>
                        </Form.Item>
                        <Form.Item label="员工姓名" help={validateName} validateStatus={validateStatus}>
                            <Spin spinning={checkLoading}>
                                {getFieldDecorator('employeeCode', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择员工姓名'
                                        }
                                    ]
                                })(
                                    <OrgEmployeeTree
                                        style={{ width: '100%' }}
                                        placeholder="请选择或输入"
                                        organizationCode={info.companyCode}
                                        onChange={async val => {
                                            try {
                                                setCheckLoading(true);
                                                const { data, code, msg } = await getEmployeeStationStatus(val);
                                                if (code === 10000) {
                                                    if (data) {
                                                        setValidateName('该员工已有工位，确定后将更新该员工工位');
                                                        setValidateStatus('warning');
                                                    } else {
                                                        setValidateName(undefined);
                                                        setValidateStatus(undefined);
                                                    }
                                                } else {
                                                    message.error(msg)
                                                }
                                                setCheckLoading(false);
                                            } catch (e) {
                                                message.error(e);
                                                setCheckLoading(false);
                                            }
                                        }}
                                    />
                                )}
                            </Spin>
                        </Form.Item>
                    </>
                </Form>
            </Spin>
        </Modal>
    );
};

export default Form.create()(MoreOperateModal);
